<!--
 * @Author: huangyq
 * @Date: 2022-04-26 14:12:34
 * @LastEditTime: 2023-12-06 10:26:54
 * @LastEditors: hyq
 * @Description: your description
 * @FilePath: /vue3-boilerplate-pc-client/src/views/pages/config-center/employee/user/list.vue
-->
<template>
  <div class="employee_user st-box">
    <div class="s-box">
      <hq-search-condition
        :fields="fields"
        :models="query"
        @success="onSearch"
      ></hq-search-condition>
    </div>
    <div class="t-box">
      <hq-table-pagination
        title="用户列表"
        :list="list"
        :columns="columns"
        :loading="loading"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        :count-height="countHeight"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      >
      </hq-table-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RoleApi, UserApi } from '@/apis'
import { onBeforeMount, reactive, ref } from 'vue'
import { useTablePagination } from '@/hooks'

// 查询条件
const query = reactive({
  name: '',
  name1: ''
})
const roleOptions = ref<Record<string, number | string>[]>([])
const fields = reactive([
  {
    prop: 'name',
    type: 'input',
    label: '用户名称',
    placeholder: '请输入用户名称'
  },
  {
    prop: 'mobilePhone',
    type: 'input',
    label: '手机号码',
    placeholder: '请输入手机号码'
  },
  {
    prop: 'roleId',
    type: 'select',
    label: '角色',
    placeholder: '请选择角色',
    options: roleOptions
  },
  {
    prop: 'status',
    type: 'select',
    label: '状态',
    placeholder: '请选择',
    options: [
      { name: '启用', id: 1 },
      { name: '禁用', id: 0 }
    ]
  }
])

// 角色列表
onBeforeMount(() => {
  fetchRoles()
})
async function fetchRoles() {
  const res = await RoleApi.roleListUsingGet({})
  if (res.data.success) {
    roleOptions.value = res.data.data as Record<string, string | number>[]
  }
}

// table数据
const columns = [
  { prop: 'name', label: '用户名称', align: 'center' },
  { prop: 'mobilePhone', label: '手机号码', align: 'center' },
  {
    prop: 'roleName',
    label: '角色',
    align: 'center'
  },
  { prop: 'status', label: '账号状态', align: 'center', slot: true },
  { prop: 'updatedBy', label: '操作人', align: 'center' },
  { prop: 'updatedDate', label: '更新时间', align: 'center' },
  {
    prop: 'operation',
    label: '操作',
    align: 'center',
    slot: true,
    width: 140
  }
]
const {
  list,
  onTableSearch,
  loading,
  currentPage,
  pageSize,
  total,
  countHeight,
  onSizeChange,
  onCurrentChange
} = useTablePagination(UserApi.queryUserPageUsingGET)

async function onSearch() {
  currentPage.value = 1
  onTableSearch(query)
}
onBeforeMount(() => {
  onSearch()
})
</script>

<style scoped lang="scss"></style>
